<template>
  <el-dialog
    :model-value="modelValue"
    :title="dialogTitle"
    width="60%"
    @update:modelValue="$emit('update:modelValue', $event)"
    top="5vh"
  >
    <div v-if="result" class="result-detail-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="结果名称">{{ result.name }}</el-descriptions-item>
        <el-descriptions-item label="来源工作流">{{ result.workflowName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ result.creationTime }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="result.status === '完成' ? 'success' : 'warning'">{{ result.status }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-tabs v-model="activeTab" class="detail-tabs">
        <el-tab-pane label="结果预览" name="preview">
          <div class="preview-content">
            <!-- 模拟不同类型的结果预览 -->
            <div v-if="result.id % 2 === 0">
              <h4>PCA降维结果</h4>
              <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
            </div>
            <div v-else>
              <h4>差异基因列表</h4>
              <el-table :data="mockTableData" height="350" stripe>
                <el-table-column prop="gene" label="基因ID"></el-table-column>
                <el-table-column prop="logFC" label="Log Fold Change" sortable></el-table-column>
                <el-table-column prop="pValue" label="P-value" sortable></el-table-column>
                <el-table-column prop="adjPValue" label="Adjusted P-value" sortable></el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="文件下载" name="download">
          <div class="download-content">
            <p>以下是本次分析生成的相关文件，您可以选择下载。</p>
            <el-checkbox-group v-model="selectedFiles">
              <el-checkbox v-for="file in mockFileList" :key="file.name" :label="file.name">
                {{ file.name }} ({{ file.size }})
              </el-checkbox>
            </el-checkbox-group>
            <el-button type="primary" @click="handleDownload" class="download-btn" :disabled="selectedFiles.length === 0">
              下载选中文件
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('update:modelValue', false)">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';

const props = defineProps({
  modelValue: Boolean,
  result: Object,
});
defineEmits(['update:modelValue']);

const activeTab = ref('preview');
const chartContainer = ref(null);
let myChart = null;

const dialogTitle = computed(() => props.result ? `详情: ${props.result.name}` : '结果详情');

// 模拟数据
const mockTableData = ref([
  { gene: 'GeneA', logFC: 2.5, pValue: 0.001, adjPValue: 0.005 },
  { gene: 'GeneB', logFC: -1.8, pValue: 0.002, adjPValue: 0.008 },
  { gene: 'GeneC', logFC: 3.1, pValue: 0.0005, adjPValue: 0.003 },
]);
const mockFileList = ref([
    { name: 'pca_coordinates.csv', size: '2.3 MB' },
    { name: 'visualization_plot.png', size: '800 KB' },
    { name: 'analysis_report.html', size: '1.2 MB' },
]);
const selectedFiles = ref([]);

const initChart = () => {
  if (chartContainer.value && props.result && props.result.id % 2 === 0) {
    myChart = echarts.init(chartContainer.value);
    const option = {
      xAxis: {},
      yAxis: {},
      series: [{
        symbolSize: 10,
        data: Array.from({length: 50}, () => [Math.random() * 10, Math.random() * 10]),
        type: 'scatter'
      }],
      tooltip: { trigger: 'axis' }
    };
    myChart.setOption(option);
  }
};

watch(() => props.modelValue, (newValue) => {
  if (newValue && props.result) {
    activeTab.value = 'preview';
    nextTick(() => {
        if(myChart) {
            myChart.dispose();
            myChart = null;
        }
      initChart();
    });
  }
});

const handleDownload = () => {
    if(selectedFiles.value.length > 0) {
        ElMessage.success(`正在开始下载 ${selectedFiles.value.length} 个文件...`);
        // 模拟下载
    } else {
        ElMessage.warning('请至少选择一个文件');
    }
}

</script>

<style scoped>
.result-detail-content {
  max-height: 70vh;
  overflow-y: auto;
}
.detail-tabs {
  margin-top: 20px;
}
.preview-content, .download-content {
  padding: 10px;
}
.download-btn {
    margin-top: 20px;
}
</style>